<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页o</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .pull-right {float: right;}
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel " style="background-color: #FFD800">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>坐席数量</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="zxcount">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #96DBB9">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>拨打次数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" ><span id="bscs">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <!--                                <small>当前分类通话总数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #72CFA1">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>接通数</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="jts">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <!--                                <small>当前分类通话接通数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #34CD82">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>接通率</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="jtl">0</span><span>%</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #11DD78">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>通话时长</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="thsc">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #00FF80">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>计费时长</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="jfsc">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        </div>
    </div>


    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md2 ">
                <div class="col-xs-6 col-md-3 " style="width:100%;">
                    <div class="panel " style="background-color: #0073FF;width:100%;height:260px;">
<!--                        <div class="panel-body "     style=" padding: 60px;"  >-->
                        <div class=" " style="text-align: center;">
                            <div class=" " style="padding-top: 60px">
                                <h1>新增客户数量</h1>
                                <h3>(新建+领取+分配)</h3>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="zxsl"></span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>同比上周 </small><small id="zxsltb"></small>
<!--                                同比增长率=（本期数-同期数）÷同期数-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-md-3 " style="width:100%;">
                    <div class="panel " style="background-color: #FF1700;width:100%;height:260px;">
                        <div class=" " style="text-align: center;">
                            <div class=" " style="padding-top: 60px">
                                <h1>新增意向客户数量</h1>
                                <h3>(A+B)</h3>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="khsl"></span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <small>同比上周 </small><small id="khsltb"></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md8">
                <div class="col-xs-6 col-md-3">
                    <div class="layui-container" >
                        <div class="layui-row layui-col-space15">
                            <!-- 全局时间范围选择 -->
                            <div class="layui-col-sm12">
                                <div class="layui-card">
                                    <div class="layui-card-header" style="height: 52px;">
                                        <div class="layui-form"
                                             style="min-width: 400px;max-height: 30px;display: inline-flex; margin-top: 8px;">

                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label" style="padding: 9px 8px">时间范围</label>
                                                    <div class="layui-input-inline">
                                                         <input class="layui-input" id="globalDate" value="" placeholder=" " type="text">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <div class="layui-inline">
                                                    <div class="layui-input-inline" style="width: 80px;">
                                                        <select class="global-time-unit" name="timeUnit" lay-filter="global-time-unit">
                                                            <option value="1">天</option>
                                                            <option value="2" selected>周</option>
                                                            <option value="3">月</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="layui-inline">
                                                    <span style="color: red;" class="prompt_info"></span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 用户注册 -->
                            <div class="layui-col-sm12">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div class="layui-row">
                                            <div class="layui-col-sm12">
                                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                                     lay-filter="LAY-index-pagetwo" lay-anim="fade" style="width: 100%; ">
                                                    <div id="userRegisterCount" style="width:100%;height:500px;"></div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #F42C18;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>意向度A</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" ><span id="Adata">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <!--                                <small>当前分类通话总数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #EB3F2D;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>意向度B</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="Bdata">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                                <!--                                <small>当前分类通话接通数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel" style="background-color: #177AF1;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>意向度C</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="Cdata">0</span><span></span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel " style="background-color: #5696E8;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>意向度D</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="Ddata">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel " style="background-color: #92B8E8;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>意向度E</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="Edata">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="col-xs-6 col-md-3">
                    <div class="panel " style="background-color: #C7D9F6;">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>意向度O</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins"><span id="Odata">0</span></h1>
                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/home.js?v=0.1"></script>
<script src="/js/common.js"></script>
<script src="/js/mainOther.js"></script>
<script src="/js/echarts.min.js"></script>
</body>
<script>
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var form = layui.form;
    var element = layui.element;
    $(function(){
        userInfo = CoreUtil.getData("userInfo");
        userRoles = CoreUtil.getData("userRoles");
        userDepts = CoreUtil.getData("userDepts");
        sysRolesList = CoreUtil.getData("sysRolesList");
        userSysUsers = CoreUtil.getData("userSysUsers");
        hwtj = CoreUtil.getData("hwtj");
        sysRoleName = userInfo.sysRoleName;
        if (!!hwtj) {
            var jtl = !!hwtj.jtl?hwtj.jtl+"":"0";
            $("#bscs").html(removeTrailingDotZero(hwtj.bscs));
            $("#jts").html(removeTrailingDotZero(hwtj.jts));
            $("#jtl").html(jtl);
            // $("#thsc").html(hwtj.thsc.replace(/\.?0+$/, ""));
            $("#thsc").html(removeTrailingDotZero(hwtj.thsc));
            // $("#jfsc").html(hwtj.jfsc.replace(/\.?0+$/, "")+"分");
            $("#jfsc").html(removeTrailingDotZero(hwtj.jfsc)+"分");
        }
        CoreUtil.sendGet("/sys/home/twdkhData", null, function (res) {
            var code = res.code;
            var data = res.data;
            if (code == 0) {
                var type = "增长";
                const addkh = document.getElementById('zxsl');
                addkh.innerHTML = data.addkh;
                if (data.addkhsltb < 0 ) {
                    type = "下降";
                }
                const addkhsltb = document.getElementById('zxsltb');
                addkhsltb.innerHTML = type + data.addkhsltb + "%";

                const yxkh = document.getElementById('khsl');
                yxkh.innerHTML = data.yxkh;
                if (data.yxkhsltb < 0 ) {
                    type = "下降";
                } else {
                    type = "增长";
                }
                const yxkhsltb = document.getElementById('khsltb');
                yxkhsltb.innerHTML = type + data.yxkhsltb + "%";
                $("#zxcount").html(data.zxcount);
                var abcd = data.abcd;
                for (var i = 0; i<abcd.length;i++){
                    var mapData = abcd[i];
                    if (mapData.khjb=="A") $("#Adata").html(mapData.coun);
                    if (mapData.khjb=="B") $("#Bdata").html(mapData.coun);
                    if (mapData.khjb=="C") $("#Cdata").html(mapData.coun);
                    if (mapData.khjb=="D") $("#Ddata").html(mapData.coun);
                    if (mapData.khjb=="E") $("#Edata").html(mapData.coun);
                    if (mapData.khjb=="0") $("#Odata").html(mapData.coun);
                }
            }
        });
    });
    function removeTrailingDotZero(num) {
        return num.toString().replace(/\.0$/, '');
    }
</script>
</html>